<template>
  <div class="user-profile-container">
    <!-- 头部信息 -->
    <div class="profile-header">
      <div class="avatar-section">
        <el-upload
          class="avatar-uploader"
          action="#"
          :show-file-list="false"
          :auto-upload="false"
          :on-change="handleAvatarChange"
        >
          <el-avatar :size="100" :src="userData.aveter || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" 
                    class="avatar-shadow" />
          <div class="avatar-edit-hint">
            <el-icon><Edit /></el-icon>
          </div>
        </el-upload>
      </div>
      <div class="basic-info">
        <div class="name-edit">
          <h1 v-if="!editingName">{{ userData.name || '未填写姓名' }}</h1>
          <el-input
            v-else
            v-model="editName"
            size="small"
            @blur="saveName"
            @keyup.enter="saveName"
          />
          <el-button
            type="text"
            :icon="editingName ? '' : Edit"
            @click="toggleNameEdit"
            class="edit-btn"
          >
            {{ editingName ? '取消' : '编辑' }}
          </el-button>
        </div>
        <div class="meta-info">
          <span class="meta-tag sex-tag">{{ formatSex(userData.sex) }}</span>
          <span class="meta-tag edu-tag">{{ formatEducation(userData.education) }}</span>
          <span class="meta-tag status-tag">{{ formatCurrentStatus(userData.current_status) }}</span>
        </div>
        <div class="action-buttons">
          <el-button type="primary" size="small" class="action-btn" @click="handleContact">
            <el-icon><Message /></el-icon>
            <span>立即沟通</span>
          </el-button>
          <el-button type="success" size="small" class="action-btn" @click="handleCall">
            <el-icon><Phone /></el-icon>
            <span>电话联系</span>
          </el-button>
          <el-button type="danger" size="small" class="action-btn" @click="confirmDeleteAccount">
            <el-icon><Delete /></el-icon>
            <span>删除账号</span>
          </el-button>
        </div>
      </div>
    </div>

    <div class="divider"></div>

    <!-- 个人信息 -->
    <el-card class="profile-section info-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <el-icon class="header-icon"><User /></el-icon>
          <span>个人信息</span>
          <el-button type="text" class="edit-section-btn" @click="showEditDialog('basic')">
            <el-icon><Edit /></el-icon> 编辑
          </el-button>
        </div>
      </template>
      <div class="info-table">
        <div class="info-row">
          <span class="info-label"><el-icon><Calendar /></el-icon> 年龄</span>
          <span class="info-value">{{ calculateAge(userData.birthdate) || '未填写' }}岁</span>
        </div>
        <div class="info-row">
          <span class="info-label"><el-icon><School /></el-icon> 学历</span>
          <span class="info-value">{{ formatEducation(userData.education) }}</span>
        </div>
        <div class="info-row">
          <span class="info-label"><el-icon><Briefcase /></el-icon> 求职状态</span>
          <span class="info-value">{{ formatCurrentStatus(userData.current_status) }}</span>
        </div>
      </div>
    </el-card>

    <!-- 个人简介 -->
    <el-card class="profile-section" shadow="hover">
      <template #header>
        <div class="card-header">
          <el-icon class="header-icon"><Notebook /></el-icon>
          <span>个人简介</span>
          <el-button type="text" class="edit-section-btn" @click="showEditDialog('description')">
            <el-icon><Edit /></el-icon> 编辑
          </el-button>
        </div>
      </template>
      <div class="description-content">
        <p v-if="userData.description">{{ userData.description }}</p>
        <el-empty v-else description="暂无个人简介" :image-size="60" />
      </div>
    </el-card>

    <!-- 工作经历 -->
    <el-card class="profile-section" shadow="hover">
      <template #header>
        <div class="card-header">
          <el-icon class="header-icon"><OfficeBuilding /></el-icon>
          <span>工作经历</span>
          <div class="work-exp-actions">
            <el-button type="primary" size="small" @click="showAddExperienceDialog">
              <el-icon><Plus /></el-icon> 添加经历
            </el-button>
          </div>
        </div>
      </template>
      
      <div class="work-experience-list">
        <div v-for="(exp, index) in userData.work_experiences" :key="index" class="work-experience-item">
          <div class="experience-header">
            <h3><el-icon><Location /></el-icon> {{ exp.company || '未填写公司名称' }}</h3>
            <div class="position"><el-icon><Postcard /></el-icon> {{ exp.position || '未填写职位' }}</div>
          </div>
          <div class="experience-content">
            <p>{{ exp.description || '暂无工作描述' }}</p>
          </div>
          <div class="experience-duration">
            <el-icon><Clock /></el-icon> {{ formatDate(exp.start_date) }} - {{ exp.end_date ? formatDate(exp.end_date) : '至今' }}
          </div>
          <div class="experience-actions">
            <el-button type="primary" size="small" plain @click="showEditExperienceDialog(exp)">
              <el-icon><Edit /></el-icon> 编辑
            </el-button>
            <el-button type="danger" size="small" plain @click="confirmDeleteExperience(exp.id)">
              <el-icon><Delete /></el-icon> 删除
            </el-button>
          </div>
        </div>
        
        <div v-if="!userData.work_experiences || userData.work_experiences.length === 0" class="empty-work">
          <el-empty description="暂无工作经历" :image-size="80" />
        </div>
      </div>
    </el-card>

    <!-- 简历附件 -->
    <el-card class="profile-section" shadow="hover" v-if="userData.resume_url">
      <template #header>
        <div class="card-header">
          <el-icon class="header-icon"><Document /></el-icon>
          <span>简历附件</span>
          <el-button type="text" class="edit-section-btn" @click="showResumeUploadDialog">
            <el-icon><Upload /></el-icon> 更新简历
          </el-button>
        </div>
      </template>
      <div class="resume-actions">
        <el-button type="primary" class="resume-btn" @click="previewResume">
          <el-icon><View /></el-icon>
          <span>预览简历</span>
        </el-button>
        <el-button type="success" class="resume-btn" @click="downloadResume">
          <el-icon><Download /></el-icon>
          <span>下载简历</span>
        </el-button>
      </div>
    </el-card>

    <!-- 编辑基本信息对话框 -->
    <el-dialog v-model="editBasicDialogVisible" title="编辑基本信息" width="600px">
      <el-form :model="editBasicForm" label-width="100px">
        <el-form-item label="性别">
          <el-radio-group v-model="editBasicForm.sex">
            <el-radio :label="1">女</el-radio>
            <el-radio :label="2">男</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="出生日期">
          <el-date-picker
            v-model="editBasicForm.birthdate"
            type="date"
            placeholder="选择日期"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="学历">
          <el-select v-model="editBasicForm.education" placeholder="请选择学历">
            <el-option
              v-for="item in educationOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="求职状态">
          <el-select v-model="editBasicForm.current_status" placeholder="请选择求职状态">
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editBasicDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveBasicInfo">保存</el-button>
      </template>
    </el-dialog>

    <!-- 编辑个人简介对话框 -->
    <el-dialog v-model="editDescDialogVisible" title="编辑个人简介" width="600px">
      <el-input
        v-model="editDescForm.description"
        type="textarea"
        :rows="8"
        placeholder="请输入个人简介"
      />
      <template #footer>
        <el-button @click="editDescDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveDescription">保存</el-button>
      </template>
    </el-dialog>

    <!-- 添加/编辑工作经历对话框 -->
    <el-dialog v-model="experienceDialogVisible" :title="experienceDialogTitle" width="700px">
      <el-form :model="experienceForm" label-width="100px">
        <el-form-item label="公司名称" required>
          <el-input v-model="experienceForm.company" placeholder="请输入公司名称" />
        </el-form-item>
        <el-form-item label="职位名称" required>
          <el-input v-model="experienceForm.position" placeholder="请输入职位名称" />
        </el-form-item>
        <el-form-item label="工作时间" required>
          <div class="date-range-picker">
            <el-date-picker
              v-model="experienceForm.start_date"
              type="month"
              placeholder="开始时间"
              value-format="YYYY-MM"
              style="width: 48%; margin-right: 4%"
            />
            <el-date-picker
              v-model="experienceForm.end_date"
              type="month"
              placeholder="结束时间"
              value-format="YYYY-MM"
              style="width: 48%"
              :disabled="experienceForm.is_current"
            />
            <el-checkbox v-model="experienceForm.is_current" style="margin-top: 10px">
              至今在此工作
            </el-checkbox>
          </div>
        </el-form-item>
        <el-form-item label="行业">
          <el-select v-model="experienceForm.industry" placeholder="请选择行业">
            <el-option
              v-for="item in industryOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="薪资范围">
          <el-input v-model="experienceForm.salary_range" placeholder="例如: 15k-20k" />
        </el-form-item>
        <el-form-item label="工作描述">
          <el-input
            v-model="experienceForm.description"
            type="textarea"
            :rows="4"
            placeholder="详细描述你的工作内容和成就"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="experienceDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveWorkExperience">保存</el-button>
      </template>
    </el-dialog>

    <!-- 上传简历对话框 -->
    <el-dialog v-model="resumeUploadDialogVisible" title="上传简历" width="500px">
      <el-upload
        class="upload-demo"
        drag
        action="#"
        :auto-upload="false"
        :on-change="handleResumeChange"
        :file-list="resumeFileList"
        :limit="1"
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">
          将文件拖到此处，或<em>点击上传</em>
        </div>
        <template #tip>
          <div class="el-upload__tip">
            仅支持 PDF/DOC/DOCX 文件，且不超过 10MB
          </div>
        </template>
      </el-upload>
      <template #footer>
        <el-button @click="resumeUploadDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="uploadResume">上传</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  User,
  Calendar,
  School,
  Briefcase,
  Notebook,
  OfficeBuilding,
  Document,
  Message,
  Phone,
  Location,
  Postcard,
  Clock,
  View,
  Download,
  Edit,
  Delete,
  Plus,
  Upload,
  UploadFilled
} from '@element-plus/icons-vue'

const userData = ref({})
const userId = localStorage.getItem('userid')

// 编辑状态
const editingName = ref(false)
const editName = ref('')

// 对话框控制
const editBasicDialogVisible = ref(false)
const editDescDialogVisible = ref(false)
const experienceDialogVisible = ref(false)
const resumeUploadDialogVisible = ref(false)

// 表单数据
const editBasicForm = ref({
  sex: null,
  birthdate: '',
  education: null,
  current_status: null
})

const editDescForm = ref({
  description: ''
})

const experienceForm = ref({
  id: null,
  company: '',
  position: '',
  start_date: '',
  end_date: '',
  description: '',
  salary_range: '',
  industry: null,
  is_current: false
})

const resumeFileList = ref([])

// 计算属性
const experienceDialogTitle = computed(() => {
  return experienceForm.value.id ? '编辑工作经历' : '添加工作经历'
})

// 选项数据
const educationOptions = [
  { value: 1, label: '初中以下' },
  { value: 2, label: '初中' },
  { value: 3, label: '中专' },
  { value: 4, label: '高中' },
  { value: 5, label: '大专' },
  { value: 6, label: '本科' },
  { value: 7, label: '硕士' },
  { value: 8, label: '博士及以上' }
]

const statusOptions = [
  { value: 1, label: '在职看机会' },
  { value: 2, label: '离职' },
  { value: 3, label: '在校生等' },
  { value: 4, label: '兼职' }
]

const industryOptions = [
  { value: 1, label: '互联网' },
  { value: 2, label: '金融' },
  { value: 3, label: '教育' },
  { value: 4, label: '医疗健康' },
  { value: 5, label: '房地产' },
  { value: 6, label: '制造业' },
  { value: 7, label: '消费品' },
  { value: 8, label: '物流运输' },
  { value: 9, label: '文化传媒' },
  { value: 10, label: '其他' }
]

// 方法
const fetchUserData = async () => {
  try {
    const response = await axios.post('http://127.0.0.1:8000/user/UserInfo/', {
      userid: userId
    })
    
    if (response.data && response.data.code === 200) {
      userData.value = response.data.data || {}
      // 初始化编辑表单数据
      editBasicForm.value = {
        sex: userData.value.sex,
        birthdate: userData.value.birthdate,
        education: userData.value.education,
        current_status: userData.value.current_status
      }
      editDescForm.value.description = userData.value.description || ''
    } else {
      ElMessage.error('获取用户数据失败')
    }
  } catch (error) {
    console.error('获取用户数据失败:', error)
    ElMessage.error('获取用户数据失败')
  }
}

const showAddExperienceDialog = () => {
  experienceForm.value = {
    id: null,
    company: '',
    position: '',
    start_date: '',
    end_date: '',
    description: '',
    salary_range: '',
    industry: null,
    is_current: false
  }
  experienceDialogVisible.value = true
}

const saveWorkExperience = async () => {
  if (!experienceForm.value.company || !experienceForm.value.position || !experienceForm.value.start_date) {
    ElMessage.warning('请填写必填字段')
    return
  }

  // 转换日期格式：从 YYYY-MM 转换为 YYYY-MM-DD
  const formatDateForBackend = (dateString) => {
    if (!dateString) return null
    // 如果已经是完整日期格式，直接返回
    if (dateString.includes('-') && dateString.split('-').length === 3) {
      return dateString
    }
    // 否则添加 '-01' 作为日部分
    return dateString + '-01'
  }

  const payload = {
    job_info_id: userData.value.id,
    work_experience: {
      company: experienceForm.value.company,
      position: experienceForm.value.position,
      start_date: formatDateForBackend(experienceForm.value.start_date),
      end_date: experienceForm.value.is_current ? null : formatDateForBackend(experienceForm.value.end_date),
      description: experienceForm.value.description,
      salary_range: experienceForm.value.salary_range,
      industry: experienceForm.value.industry,
      is_current: experienceForm.value.is_current
    }
  }

  console.log('Sending payload:', payload) // 调试用

  try {
    const response = await axios.post('http://127.0.0.1:8000/user/add-work-experience/', payload)
    
    if (response.data && response.data.code === 200) {
      ElMessage.success('工作经历添加成功')
      await fetchUserData()
      experienceDialogVisible.value = false
    } else {
      const errorMsg = response.data.message || '工作经历添加失败'
      ElMessage.error(`${errorMsg}: ${JSON.stringify(response.data.errors || '')}`)
    }
  } catch (error) {
    console.error('添加工作经历失败:', error)
    const errorMsg = error.response?.data?.message || '添加工作经历失败'
    ElMessage.error(`${errorMsg}: ${JSON.stringify(error.response?.data?.errors || error.message)}`)
  }
}
// 其他方法保持不变...
const toggleNameEdit = () => {
  editingName.value = !editingName.value
  if (editingName.value) {
    editName.value = userData.value.name || ''
  }
}

const saveName = async () => {
  if (!editName.value.trim()) {
    ElMessage.warning('姓名不能为空')
    return
  }

  try {
    const response = await axios.post('http://127.0.0.1:8000/user/jobinfo/', {
      userid: userId,
      name: editName.value
    })

    if (response.data && response.data.code === 200) {
      ElMessage.success('姓名更新成功')
      userData.value.name = editName.value
      editingName.value = false
    } else {
      ElMessage.error('姓名更新失败')
    }
  } catch (error) {
    console.error('更新姓名失败:', error)
    ElMessage.error('姓名更新失败')
  }
}

const showEditDialog = (type) => {
  if (type === 'basic') {
    editBasicDialogVisible.value = true
  } else if (type === 'description') {
    editDescDialogVisible.value = true
  }
}

const saveBasicInfo = async () => {
  try {
    const response = await axios.post('http://127.0.0.1:8000/user/jobinfo/', {
      userid: userId,
      ...editBasicForm.value
    })

    if (response.data && response.data.code === 200) {
      ElMessage.success('基本信息更新成功')
      Object.assign(userData.value, editBasicForm.value)
      editBasicDialogVisible.value = false
    } else {
      ElMessage.error('基本信息更新失败')
    }
  } catch (error) {
    console.error('更新基本信息失败:', error)
    ElMessage.error('基本信息更新失败')
  }
}

const saveDescription = async () => {
  try {
    const response = await axios.post('http://127.0.0.1:8000/user/jobinfo/', {
      userid: userId,
      description: editDescForm.value.description
    })

    if (response.data && response.data.code === 200) {
      ElMessage.success('个人简介更新成功')
      userData.value.description = editDescForm.value.description
      editDescDialogVisible.value = false
    } else {
      ElMessage.error('个人简介更新失败')
    }
  } catch (error) {
    console.error('更新个人简介失败:', error)
    ElMessage.error('个人简介更新失败')
  }
}

const showEditExperienceDialog = (experience) => {
  experienceForm.value = {
    id: experience.id,
    company: experience.company,
    position: experience.position,
    start_date: experience.start_date,
    end_date: experience.end_date,
    description: experience.description,
    salary_range: experience.salary_range,
    industry: experience.industry,
    is_current: !experience.end_date
  }
  experienceDialogVisible.value = true
}

const confirmDeleteExperience = (experienceId) => {
  ElMessageBox.confirm(
    '确定要删除这条工作经历吗?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(async () => {
    try {
      const response = await axios.delete('http://127.0.0.1:8000/user/workexperience/', {
        data: { id: experienceId }
      })

      if (response.data && response.data.code === 200) {
        ElMessage.success('工作经历删除成功')
        await fetchUserData() // 刷新数据
      } else {
        ElMessage.error('工作经历删除失败')
      }
    } catch (error) {
      console.error('删除工作经历失败:', error)
      ElMessage.error('工作经历删除失败')
    }
  }).catch(() => {})
}

const confirmDeleteAccount = () => {
  ElMessageBox.confirm(
    '确定要删除您的账号吗? 此操作不可恢复!',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'error'
    }
  ).then(async () => {
    try {
      const response = await axios.delete('http://127.0.0.1:8000/user/jobinfo/', {
        data: { userid: userId }
      })

      if (response.data && response.data.code === 200) {
        ElMessage.success('账号删除成功')
        // 这里可以添加重定向到登录页或其他操作
      } else {
        ElMessage.error('账号删除失败')
      }
    } catch (error) {
      console.error('删除账号失败:', error)
      ElMessage.error('账号删除失败')
    }
  }).catch(() => {})
}

const showResumeUploadDialog = () => {
  resumeFileList.value = []
  resumeUploadDialogVisible.value = true
}

const handleResumeChange = (file) => {
  const isLt10M = file.size / 1024 / 1024 < 10
  const isAcceptType = ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'].includes(file.raw.type)

  if (!isAcceptType) {
    ElMessage.error('只能上传 PDF/DOC/DOCX 文件!')
    return false
  }
  if (!isLt10M) {
    ElMessage.error('文件大小不能超过 10MB!')
    return false
  }
  resumeFileList.value = [file]
  return false
}

const uploadResume = async () => {
  if (resumeFileList.value.length === 0) {
    ElMessage.warning('请选择要上传的文件')
    return
  }

  const formData = new FormData()
  formData.append('resume', resumeFileList.value[0].raw)
  formData.append('userid', userId)

  try {
    const response = await axios.post('http://127.0.0.1:8000/upload-resume/', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })

    if (response.data && response.data.code === 200) {
      ElMessage.success('简历上传成功')
      userData.value.resume_url = response.data.url
      resumeUploadDialogVisible.value = false
    } else {
      ElMessage.error('简历上传失败')
    }
  } catch (error) {
    console.error('上传简历失败:', error)
    ElMessage.error('简历上传失败')
  }
}

const handleAvatarChange = (file) => {
  const isImage = file.raw.type.startsWith('image/')
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!isImage) {
    ElMessage.error('只能上传图片文件!')
    return false
  }
  if (!isLt2M) {
    ElMessage.error('图片大小不能超过 2MB!')
    return false
  }

  const formData = new FormData()
  formData.append('avatar', file.raw)
  formData.append('userid', userId)  // 确保userId已定义

  axios.post('http://127.0.0.1:8000/user/upload-avatar/', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }).then(response => {
    if (response.data && response.data.code === 200) {
      ElMessage.success('头像更新成功')
      userData.value.aveter = response.data.data.avatar_url
    } else {
      ElMessage.error(response.data.message || '头像更新失败')
    }
  }).catch(error => {
    console.error('上传头像失败:', error)
    ElMessage.error(error.response?.data?.message || '上传头像失败')
  })
  
  return false
}

const calculateAge = (birthdate) => {
  if (!birthdate) return null
  const birthDate = new Date(birthdate)
  const today = new Date()
  let age = today.getFullYear() - birthDate.getFullYear()
  const monthDiff = today.getMonth() - birthDate.getMonth()
  
  if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
    age--
  }
  return age
}

const handleContact = () => {
  ElMessage.success('已发送沟通请求')
}

const handleCall = () => {
  ElMessage.info('正在准备电话联系...')
}

const previewResume = () => {
  if (userData.value.resume_url) {
    window.open(userData.value.resume_url, '_blank')
  } else {
    ElMessage.warning('暂无简历可预览')
  }
}

const downloadResume = () => {
  if (userData.value.resume_url) {
    const link = document.createElement('a')
    link.href = userData.value.resume_url
    link.download = `${userData.value.name || '用户'}的简历.pdf`
    link.click()
  } else {
    ElMessage.warning('暂无简历可下载')
  }
}

const formatSex = (sex) => {
  return sex === 1 ? '女' : sex === 2 ? '男' : '未设置'
}

const formatEducation = (education) => {
  const educationMap = {
    1: '初中以下',
    2: '初中',
    3: '中专',
    4: '高中',
    5: '大专',
    6: '本科',
    7: '硕士',
    8: '博士及以上'
  }
  return educationMap[education] || '未填写'
}

const formatCurrentStatus = (status) => {
  const statusMap = {
    1: '在职-考虑机会',
    2: '离职',
    3: '在校生等',
    4: '兼职'
  }
  return statusMap[status] || '未设置'
}

const formatDate = (dateString) => {
  if (!dateString) return '未填写'
  if (dateString.includes('-')) {
    const [year, month] = dateString.split('-')
    return `${year}.${month.padStart(2, '0')}`
  }
  return dateString
}

onMounted(() => {
  fetchUserData()
})
</script>
<style scoped lang="scss">
.user-profile-container {
  max-width: 800px;
  margin: 0 auto;
  margin-top: 40px;
  padding: 30px;
  font-family: 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  color: #333;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.profile-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding: 0 10px;
}

.avatar-section {
  margin-right: 30px;
  position: relative;
  
  .avatar-shadow {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
    
    &:hover {
      transform: scale(1.05);
    }
  }
}

.profile-header h1 {
  margin: 0 0 12px 0;
  font-size: 28px;
  font-weight: 600;
  color: #2c3e50;
}

.meta-info {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
  
  .meta-tag {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    
    &.sex-tag {
      background-color: #f0f7ff;
      color: #409eff;
      border: 1px solid #d9ecff;
    }
    
    &.edu-tag {
      background-color: #f0f9eb;
      color: #67c23a;
      border: 1px solid #e1f3d8;
    }
    
    &.status-tag {
      background-color: #fdf6ec;
      color: #e6a23c;
      border: 1px solid #faecd8;
    }
  }
}

.action-buttons {
  display: flex;
  gap: 15px;
  margin-top: 25px;
  
  .action-btn {
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    
    &:active {
      transform: translateY(0);
    }
  }
}

.divider {
  height: 1px;
  background: linear-gradient(to right, transparent, #e0e0e0, transparent);
  margin: 25px 0;
}

.profile-section {
  margin-bottom: 25px;
  border-radius: 8px;
  border: none;
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) !important;
  }
  
  :deep(.el-card__header) {
    padding: 14px 20px;
    border-bottom: 1px solid #f0f0f0;
    background-color: #f9fafc;
  }
  
  :deep(.el-card__body) {
    padding: 20px;
  }
}

.card-header {
  font-size: 17px;
  font-weight: 600;
  color: #444;
  display: flex;
  align-items: center;
  
  .header-icon {
    margin-right: 8px;
    color: #409eff;
    font-size: 18px;
  }
}

.info-card {
  margin-bottom: 30px;
}

.info-table {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 25px;
}

.info-row {
  display: flex;
  align-items: center;
  
  .info-label {
    color: #666;
    width: 100px;
    font-size: 14px;
    display: flex;
    align-items: center;
    
    .el-icon {
      margin-right: 6px;
      font-size: 16px;
      color: #909399;
    }
  }
  
  .info-value {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: #333;
  }
}

.description-content {
  line-height: 1.8;
  color: #555;
  font-size: 14px;
  
  p {
    margin: 0;
  }
}

.work-experience-list {
  .work-experience-item {
    padding: 18px 0;
    border-bottom: 1px dashed #e8e8e8;
    
    &:last-child {
      border-bottom: none;
    }
  }
  
  .experience-header {
    margin-bottom: 10px;
    
    h3 {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
      color: #2c3e50;
      display: flex;
      align-items: center;
      
      .el-icon {
        margin-right: 8px;
        color: #409eff;
      }
    }
    
    .position {
      font-size: 14px;
      color: #666;
      margin-top: 6px;
      font-weight: 500;
      display: flex;
      align-items: center;
      
      .el-icon {
        margin-right: 8px;
        color: #67c23a;
      }
    }
  }
  
  .experience-content {
    margin: 12px 0;
    font-size: 14px;
    line-height: 1.8;
    color: #555;
    padding-left: 24px;
  }
  
  .experience-duration {
    font-size: 13px;
    color: #999;
    display: flex;
    align-items: center;
    
    .el-icon {
      margin-right: 6px;
    }
  }
}

.empty-work {
  padding: 40px 0;
}

.resume-actions {
  display: flex;
  gap: 20px;
  
  .resume-btn {
    padding: 10px 20px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    
    &:active {
      transform: translateY(0);
    }
  }
}

@media (max-width: 768px) {
  .user-profile-container {
    padding: 20px 15px;
  }
  
  .profile-header {
    flex-direction: column;
    text-align: center;
    
    .avatar-section {
      margin-right: 0;
      margin-bottom: 20px;
    }
  }
  
  .action-buttons {
    justify-content: center;
  }
  
  .info-table {
    grid-template-columns: 1fr;
  }
  
  .resume-actions {
    flex-direction: column;
    gap: 12px;
  }
}
/* 新增样式 */
.name-edit {
  display: flex;
  align-items: center;
  gap: 10px;
  
  h1 {
    margin: 0;
  }
  
  .edit-btn {
    padding: 0;
    height: auto;
  }
}

.edit-section-btn {
  margin-left: auto;
  font-size: 14px;
}

.work-exp-actions {
  margin-left: auto;
}

.experience-actions {
  margin-top: 15px;
  display: flex;
  gap: 10px;
}

.avatar-uploader {
  position: relative;
  display: inline-block;
  
  .avatar-edit-hint {
    position: absolute;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
  }
  
  &:hover .avatar-edit-hint {
    opacity: 1;
  }
}

.date-range-picker {
  display: flex;
  flex-wrap: wrap;
}

.upload-demo {
  text-align: center;
}
</style>